<template>
	<view class="content">
		<u-navbar bgColor="#f9f9f9" height="50" :safeAreaInsetTop="true" :placeholder="true">
			<view
				class="u-nav-slot"
				slot="left"
			>
				<u-search 
					:clearabled="true"
					:animation="true"
					v-model="keywork"
					placeholder="请输入要搜索的关键字"
					@search="searchAll()"
					shape="round">
				</u-search>
			</view>
		</u-navbar>
		<!-- 卡片式轮播图 -->
		<view class="u-demo-block">
			<u-swiper
				:list="swiperList"
				previousMargin="30"
				nextMargin="30"
				circular
				:autoplay="true"
				duration="1000"
				radius="5"
				bgColor="#ffffff"
				@click="swiperClick"
				></u-swiper>
		</view>
		 
		 <!-- 滚动通知 -->
		<view style="margin-top: 20rpx;">
			<u-notice-bar 
				:text="noticeText"
				color="#5ac725"
			> </u-notice-bar>
		</view>
	
		<!-- 所有模块入口 -->
		<view style="margin: 20rpx 10rpx 30rpx 10rpx;padding-bottom: 40rpx; border-radius: 12rpx;background-color: #fff;">
			<u-grid
				:border="false"
				@click="click"
			>
				<u-grid-item
						v-for="(baseListItem,baseListIndex) in baseList"
						:key="baseListIndex"
				>
					<image 
						style="width: 60rpx; height: 60rpx;padding-top: 30rpx;"
						:src="baseListItem.imgSrc">
					</image>
				
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<view style="padding-bottom: 14rpx;"><text style="font-weight: bold;margin-left: 26rpx;">最新发布</text></view>
		<!-- 最新帖子内容 -->
		<u-list @scrolltolower="scrolltolower" v-if="postList.length!=0" height="1200rpx">
			<u-list-item
				v-for="(item, index) in postList"
				:key="item.post.id"
			>
			<view class="box-post-content" @click="postsClick(item.post.id, item.post.type)">
				<u-row customStyle="margin-bottom: 8px">
					<u-col span="2">
						<u-avatar size="46" :src="item.user.avatar"></u-avatar>
					</u-col>
					<u-col span="10">
						<view>
							<u--text
								:text="item.user.nickname"
								type="primary"
								bold
								size="15"
							></u--text>
						</view>
						<view class="u-demo-block__content">
							<view style="flex: 25%;"><u-tag text="数计学院" size="mini" ></u-tag></view>
							<view style="flex: 12%;margin-left: 8rpx;"><u-tag text="19级" type="warning" size="mini"></u-tag></view>
							<view style="flex: 18%;margin-left: 8rpx;"><u-tag text="软件工程" type="success" size="mini" ></u-tag></view>
							<view style="flex: 18%;margin-left: 8rpx;"><u-tag :text="item.post.type | typeToStr()" type="error" size="mini"></u-tag></view>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="12">
						<u--text size="14" :lines="4" :text="item.post.content"></u--text>
					</u-col>
				</u-row>
				<view class="picture-content">
					<u-album v-if="item.post.imgUrls.length>0" :urls="item.post.imgUrls" multipleSize="100" :previewFullImage="false"></u-album>
				</view>
			</view>
			</u-list-item>
			<view v-if="flag">
				<u-divider text="我是有底线的" :dashed="true" lineColor="rgb(131 131 133)"></u-divider>
			</view>
		</u-list>
		<view v-else style="margin-bottom: 50rpx;">
			<u-empty
					text="暂无最新发布内容!"
					textSize="20"
					textColor="#8f99a3"
					iconColor="blue"
					iconSize="160"
					marginTop="0"
					mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png"
			>
			</u-empty>
		</view>
		
		<u-back-top 
			:scroll-top="scrollTop" 
			icon="http://106.13.239.254/icon/go_back.png"
			:iconStyle="iconStyle"
			customStyle="opacity: 0.9;">
		</u-back-top>
		<u-overlay :show="show" :opacity="0.9" @click="show = false">
			<view class="warp" >
				<view @tap.stop="searchAll()">
					<image
						mode="aspectFit"
						:src="swiperImgSrc">
					</image>
				</view>
			</view>
		</u-overlay>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	//import {mapState, mapActions} from 'vuex'
	import {getPostsList, getCategory, getSysNotice} from '../../utils/api.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				iconStyle: {
					width: '50rpx',
					height: '50rpx',
				},
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				keywork: '',
				swiperImgSrc: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				show: false,
				flag: false,	//是否出现底线
				postList: [],
				baseList: [
					{	
						id: 1,
						url: "/pages/lost-property/lost-property?type=0",
						imgSrc: '../../static/lost_and_found.png',
						name: 'photo',
						title: '失物招领'
					},
					{
						id: 2,
						url: "/pages/used-deal/used-deal?type=3",
						imgSrc: '../../static/leave_unused.png',
						name: 'lock',
						title: '二手交易'
					},
					{
						id: 3,
						url: "/pages/lost-property/lost-property?type=1",
						imgSrc: '../../static/car_shar.png',
						name: 'star',
						title: '拼车服务'
					},
					// {
					// 	id: 4,
					// 	url: "/pages/school-news/school-news",
					// 	imgSrc: '../../static/news.png',
					// 	name: 'hourglass',
					// 	title: '校园新闻'
					// },
					// {
					// 	id: 5,
					// 	url: "/pages/errand/errand",
					// 	imgSrc: '../../static/task.png',
					// 	name: 'home',
					// 	title: '跑腿服务'
					// },
					{
						id: 6,
						url: "/pages/school-scenery/school-scenery?type=2",
						imgSrc: '../../static/scenery.png',
						name: 'star',
						title: '校园风景'
					},
					{
						id: 7,
						url: "/pages/apply/apply",
						imgSrc: '../../static/repairs.png',
						name: 'photo',
						title: '维修上报'
					},
				],
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				noticeText: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用;uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用;uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用;',
				bc:'#5ac725',
				uvShow: false,
				query: {pageNo: 1, pageSize: 10, type: -1},
				total: 0,
			}
			
		},
		onLoad(option) {
			/* if(process.env.NODE_ENV === 'development'){
				console.log('开发环境')
			}else{
				console.log('生产环境')
			} */
			
			if(getApp().globalData.userInfo == null){
				getApp().globalData.userInfo = JSON.parse(uni.getStorageSync("userInfo"))
			}
			//加载轮播图
			getCategory().then(res => {
				res.urls = res.urls!=null?res.urls.split(","):[]
				this.swiperList = []
				for(let i=0; i<res.urls.length; i++){
					this.swiperList.push(`http://localhost:10086/cs-posts${res.urls[i]}`)
				}
			})
			//加载公告
			getSysNotice().then(res => {
				this.noticeText = res.noticeContent
			})
		},
		onReady() {
			this.getList()	
		},
		filters:{
			typeToStr(type){
				return getApp().getTypeStr(type)
			}
		},
		computed:{
			//...mapState(['userName'])
		},
		// 监听是否出现返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: { 
			getList(isLoad){
				if(isLoad != null) this.postList = []
				getPostsList({params: this.query}).then(res => {
					for (let i = 0; i < res.list.length; i++) {
						res.list[i].post.imgUrls = res.list[i].post.imgUrls!=null?res.list[i].post.imgUrls.split(","):[]
					}
					this.postList = this.postList.concat(res.list)
					this.total = res.total
					if(res.list.length == 0) this.flag = true
				}).catch(err => {
					console.log("index err", err)
					getApp().globalData.toast[1].message = '加载数据失败'
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {
							//回调
						}
					})
				})
			},
			//...mapActions(['login', 'logout']),
			postsClick(id, postType){	
				uni.$u.route({
					url: 'pages/posts-details/posts-details',
					params: {
						id: id,
						type: postType
					}
				})
			},
			click(index) {
				uni.$u.route(this.baseList[index].url)
			},
			swiperClick(index){
				this.show = true
				this.swiperImgSrc=this.swiperList[index]
			},
			searchAll(){
				let type = 0;
				uni.$u.route({
					url: `/pages/search/search`,
					params: {
						type: type,
						keyword: this.keywork
					},
					animationType: 'pop-in'
				})
			},
			scrolltolower() {
				//下拉加载
				if(!this.flag){
					this.query.pageNo++
					this.getList()
				}else {
					this.flag = true
				}
			},
			
		}
	}
	
</script>

<style lang="scss" scoped>

	.content{
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		
		.swiper {
			height: 720rpx;
		}
		
		.u-button{
			margin: 20rpx auto;
		}
		
		.u-demo-block{
			margin-top: 70rpx;
			text{
				display: block;
				margin: 10rpx auto;
				size: 30rpx;
			}
		}
		
		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
		.grid-text {
			font-size: 28rpx;
		}
		.box-post-content {
			margin: 16rpx 20rpx;
			padding: 18rpx 10rpx 30rpx 16rpx;
			border-radius: 16rpx;
			background-color: #fff;
			.picture-content {
				margin-top: 20rpx;
			}
		}
		.u-demo-block__content {
		    display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			
		}
	}
	
</style>